<!-- Template 代码和 Vue 2 一样 -->
<template>

  <span >{{title}}</span>
   <el-button text circle type="" size="small" ref="buttonRef" @click.stop="onClickOutside">
    <el-icon size="16"><Filter /></el-icon>
  </el-button>
  <el-popover
      :width="(props.type === 'date' && radioValue === 'formTo')? 320:180"
      ref="popoverRef"
      :virtual-ref="buttonRef"
      trigger="click"
      virtual-triggering
      popper-class="d-popover"
  >
    <div @click.stop>
      <el-radio-group v-model="radioValue" class="d-radio-group" size="small">
        <template v-if="props.type === 'string'">
          <el-radio-button  v-for="it in stringList"  :key="it.code" :label="it.name" :value="it.code" class="d-radio-btn"/>
        </template>
        <template v-if="props.type === 'number'">
          <el-radio-button  v-for="it in numberList"  :key="it.code" :label="it.name" :value="it.code" class="d-radio-btn"/>
        </template>
        <template v-if="props.type === 'date'">
          <el-radio-button  v-for="it in dateList"  :key="it.code" :label="it.name" :value="it.code" class="d-radio-btn"/>
        </template>
      </el-radio-group>
      <template v-if="props.type === 'date'">
        <template v-if="radioValue === 'formTo'">
          <el-date-picker
              v-model="inputValue"
              type="datetimerange"
              start-placeholder="Start date"
              end-placeholder="End date"
              format="YYYY-MM-DD HH:mm:ss"
              date-format="YYYY-MM-DD"
              time-format="hh:mm:ss"
              clearable="false"
              :teleported="false"
          />
        </template>
        <template v-if="radioValue === 'eq'">
          <el-date-picker
              v-model="inputValue"
              type="datetime"
              placeholder="Pick a Date"
              format="YYYY-MM-DD HH:mm:ss"
              date-format="YYYY-MM-DD"
              time-format="hh:mm:ss"
              clearable="false"
              :teleported="false"
          />
<!--          :teleported="false" 作用 el-popover 嵌套 el-date-picker 时，当 el-date-picker 关闭 不会导致 el-popover 关闭 -->
        </template>

      </template>
      <template v-else>
        <el-input v-model="inputValue"  placeholder="请输入" class="d-input"/>
      </template>
      <div class="d-btn">
        <el-button size="small" @click="onRest">重置</el-button>
        <el-button type="primary" size="small" @click="onSubmit">确定</el-button>
      </div>
    </div>
  </el-popover>
</template>
<!-- Script 代码需要使用 Vue 3 的新写法-->
<script lang="ts" name="TSearchString">
// Vue 3 的 API 需要导入才能使用
import { defineComponent, ref, unref } from 'vue'
// import filter from "@element-plus/icons-vue";
// 使用 `defineComponent` 包裹组件代码
// 即可获得完善的 TypeScript 类型推导支持
export default defineComponent({
  props: {
    title:{
      type: String,
      default: '字段',
    },
    type: {
      type: String,
      default: 'string'
    }
  },
  setup(props) {
    let popoverWidth = ref(180);
    let radioValue = ref('like');
    const inputValue = ref('');
    const buttonRef = ref();
    const popoverRef = ref();
    if(props.type == 'number'){
      radioValue = ref('eq');
    }
    if(props.type == 'date'){
      radioValue = ref('today');
    }
    popoverWidth = ref(420);
    const stringList = ref([
        {name: '包含', code:'like'},
        {name: '不包含', code:'notlike'},
        {name: '等于', code:'eq'},
        {name: '不等于', code:'neq'},
        {name: '以…开始', code:'startwidth'},
        {name: '以…结束', code:'endwidth'},
        {name: '为空', code:'empty'},
        {name: '不为空', code:'notempty'},
    ]);
      const numberList = ref([
          {name: '等于', code:'eq'},
          {name: '不等于', code:'neq'},
          {name: '大于', code:'gt'},
          {name: '小于', code:'lt'},
          {name: '大于等于', code:'egt'},
          {name: '小于等于', code:'elt'},
      ]);

    const dateList = ref([
      {name: '今天', code:'today'},
      {name: '本周', code:'tswk'},
      {name: '本月', code:'tsMth'},
      {name: '上月', code:'lastMth'},
      {name: '过去一个月', code:'pastMth'},
      {name: '过去三个月', code:'pastThreeMth'},
      {name: '从…到…', code:'formTo'},
      {name: '等于', code:'eq'},
    ]);

    const onRest = () => {
      popoverRef.value.hide();
    }

    const onSubmit = () => {
      popoverRef.value.hide();
    }

    const onClickOutside = () => {
      unref(popoverRef).popperRef?.delayHide?.()
    }

    // watch(message, (newValue, oldValue) => {
    //   console.log(`Message changed from "${oldValue}" to "${newValue}"`);
    // });
    // 将需要在 `<template />` 里使用的变量 `return` 出去
    return {
      onClickOutside,buttonRef,radioValue,inputValue,stringList, numberList,dateList, popoverRef, onRest, onSubmit,props, popoverWidth
    }
  },
})
</script>


<!-- CSS 代码和 Vue 2 一样 -->
<style lang="scss">
.d-popover {
  padding: 8px !important;
  .el-range-editor{
    .el-input__icon{
      display: none;
    }
  }
  .el-date-editor{
    .el-range-separator {
      flex: 0 !important;
    }
    .el-range-input {
      width: 47% !important;
    }
  }

    .el-date-editor--datetime{
    width:162px !important;
    .el-input__wrapper{
      padding: 1px 5px !important;
    }
    .el-input__prefix{
      display: none !important;
    }
  }
}

.d-radio-group {
  display: inline-flex !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  font-size: 0;
  flex-direction: column !important;
  width:100%;
  .d-radio-btn{
    display: block;
    width: 100%;
    label{
      width: 100% !important;
      text-align: left;
      span{
        width: 100% !important;
      }
    }
    .el-radio-button__inner{
      display: block  !important;
      width:100% !important;
      text-align: left !important;
      padding: 8px 6px !important;
      border: none !important;
    }
   }
}
</style>
<style scoped>
    .d-input{
        margin-top:8px;
    }
    .d-btn{
        margin-top:8px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

</style>
